<template>
  <div class="water">
    <!-- 头 -->
    <top></top>
    <!-- 主体 -->
    <div class="main">
      <!-- 左 -->
      <div class="water-left">
        <!-- 水系 -->
        <div class="series public">
          <div class="box">
            <div class="genre">
              水系
              <div class="footer"></div>
            </div>
            <div class="wire"></div>
            <div class="tail"></div>
          </div>
          <div
            class="series-gy"
            v-for="(item, index) in series"
            :key="index"
            :class="[
              index === 0 ? 'red' : '',
              index === 1 ? 'aaa' : '',
              index === 2 ? 'bbb' : '',
              index === 3 ? 'ccc' : '',
            ]"
          >
            {{ item }}
          </div>
        </div>
        <!-- 源头 -->
        <div class="source public">
          <div class="box">
            <div class="genre source-genre">
              涉水污染源
              <div class="footer"></div>
            </div>
            <div class="wire"></div>
            <div class="tail"></div>
          </div>
          <div class="source-main">
            <div class="source-left">
              <div class="source-sz">{{ twin | Statistic1 }}</div>
              <div class="source-zw">污水处理厂(家)</div>
            </div>
            <div class="source-right">
              <div class="source-sz">{{ num | Statistic1 }}</div>
              <div class="source-zw">间接排放源(家)</div>
            </div>
          </div>
        </div>
        <!-- 质量 -->
        <div class="quality public">
          <div style="padding-bottom: 0" class="box">
            <div class="genre">
              质量
              <div class="footer"></div>
            </div>
            <div class="wire"></div>
            <div class="tail"></div>
          </div>
          <!-- 质量图表 -->

          <QQuality
            :zldq="[xldq, lxdq, dfdq, fhdq]"
            :zlmb="[xlmb, lxmb, dfmb, fhmb]"
          ></QQuality>
        </div>
      </div>
      <!-- 中 -->
      <div class="water-centre">
        <!-- 监测 -->
        <div class="monitor public">
          <div class="box">
            <div class="genre">
              感知元
              <div class="footer"></div>
            </div>
            <div class="wire"></div>
            <div class="tail"></div>
          </div>
          <div class="monitor-xj">
            <div>
              <div class="monitor-water">
                <div class="monitor-left">水质</div>
                <div class="monitor-rigin">
                  <div class="ddiv">
                    <div class="sz">{{ all || 0 }}</div>
                    <div class="hl">兴隆湖(个)</div>
                  </div>
                  <div class="ddiv">
                    <div class="sz">{{ deer || 0 }}</div>
                    <div class="hl">鹿溪河(个)</div>
                  </div>
                  <div class="ddiv">
                    <div class="sz">{{ jiajiagou || 0 }}</div>
                    <div class="hl">贾家沟(个)</div>
                  </div>
                  <div class="ddiv">
                    <div class="sz">{{ baoshuigou || 0 }}</div>
                    <div class="hl">保水沟(个)</div>
                  </div>
                </div>
              </div>

              <div class="monitor-bottom">
                <div class="monitor-bbb">
                  <!-- 水位 -->
                  <div class="mold mb-r">
                    <div class="mold-top">水位</div>
                    <div class="mold-bm">
                      <div class="mold-sz">{{ waterGauge || 0 }}</div>
                      <div class="mold-gs">兴隆湖(个)</div>
                    </div>
                  </div>
                  <!-- 流量 -->
                  <div class="mold mb-r">
                    <div class="mold-top">流量</div>
                    <div class="mold-bm">
                      <div class="mold-sz">{{ flow || 0 }}</div>
                      <div class="mold-gs">兴隆湖(个)</div>
                    </div>
                  </div>
                  <!-- 千湿沉降 -->
                  <div class="mold mb-r">
                    <div class="mold-top">干湿沉降</div>
                    <div class="mold-bm">
                      <div class="mold-sz">{{ drying || 0 }}</div>
                      <div class="mold-gs">兴隆湖(个)</div>
                    </div>
                  </div>
                  <!-- 气象 -->
                  <div class="mold">
                    <div class="mold-top">气象站</div>
                    <div class="mold-bm">
                      <div class="mold-sz">{{ weather || 0 }}</div>
                      <div class="mold-gs">兴隆湖(个)</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="quality-main">
              <div class="quality-zb">站点水质比</div>
              <Ovo :r1="r1" :r2="r2" :r3="r3" :r4="r4" :r5="r5" :r6="r6"></Ovo>
            </div> -->
          </div>
        </div>
        <!-- 排放 -->
        <div class="discharge public">
          <div class="box">
            <div class="genre discharge-genre">
              污染排放
              <div class="footer"></div>
            </div>
            <div class="wire"></div>
            <div class="tail"></div>
          </div>
          <!-- 底部 -->
          <div class="discharge-bm">
            <!-- 许可量 -->
            <div class="allow">
              <div class="allow-title">许可量/排放量(今年)</div>

              <Permission
                :xkj="[xkj1, xkj3, xkj5, xkj7]"
                :pfj="[pfj1, pfj3, pfj5, xkj7]"
              ></Permission>
            </div>
            <!-- 排放量 -->
            <div class="displacement">
              <div class="displacement-title">许可量/排放量(去年)</div>
              <Discharge
                :xkq="[xkq2, xkq4, xkq6, xkq8]"
                :pfq="[pfq2, pfq4, pfq6, pfq8]"
              ></Discharge>
            </div>
          </div>
        </div>
      </div>
      <!-- 右 -->
      <div class="water-right">
        <!-- 排污 -->
        <div class="pollution public">
          <div class="box">
            <div class="genre pollution-genre">
              河湖排口
              <div class="footer"></div>
            </div>
            <div class="wire"></div>
            <div class="tail"></div>
          </div>
          <!-- 排污图表 -->
          <Ppollution
            :brook="[
              { value: brook || 0, name: '鹿溪河' },
              { value: fuhe || 0, name: '府河' },
              { value: dongf || 0, name: '东风渠' },
              { value: xlong || 0, name: '兴隆湖' },
            ]"
          ></Ppollution>
        </div>
        <!-- 巡查 -->
        <div class="patrol public">
          <div class="box" style="padding-bottom: 0">
            <div class="genre patrol-genre">
              本年度报警巡查
              <div class="footer"></div>
            </div>
            <div class="wire"></div>
            <div class="tail"></div>
          </div>
          <div class="patrol-bbb">
            <div class="patrol-bm">
              <div>
                <div class="patrol-sz">{{ wrbj }}</div>
                <div class="patrol-z">报警总数(条)</div>
              </div>
              <div>
                <div class="patrol-sz">{{ wrxc }}</div>
                <div class="patrol-z">工单总数(条)</div>
              </div>
              <div class="before"></div>
            </div>

            <div class="patrol-bm">
              <div>
                <div class="patrol-sz">{{ swbj }}</div>
                <div class="patrol-z">水质污染自动报警数(条)</div>
              </div>
              <div>
                <div class="patrol-sz">{{ swxc }}</div>
                <div class="patrol-z">水质污染核实报警数(条)</div>
              </div>
              <div class="before"></div>
            </div>

            <div class="patrol-bm">
              <div>
                <div class="patrol-sz">{{ llbj }}</div>
                <div class="patrol-z">水质污染巡查报警数(条)</div>
              </div>
              <div>
                <div class="patrol-sz">{{ llxc }}</div>
                <div class="patrol-z">水质污染模拟预报数(条)</div>
              </div>
              <div class="before"></div>
            </div>

            <div class="patrol-bm">
              <div>
                <div class="patrol-sz">{{ sbbj }}</div>
                <div class="patrol-z">水质设备自检报警数(条)</div>
              </div>
              <div>
                <div class="patrol-sz">{{ sbxc }}</div>
                <div class="patrol-z">巡查设备故障报警数(条)</div>
              </div>
              <div class="before"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--    <Bottom></Bottom>-->
  </div>
</template>

<script>
import Top from "@/components/top/Top.vue";
import Bottom from "@/components/bottom/Bottom.vue";
import flexble from "@/utils/index";
import QQuality from "@/components/echarts/water/QQuality.vue";
import Permission from "@/components/echarts/water/PPermission.vue";
import Discharge from "@/components/echarts/water/DDischarge.vue";
import Ppollution from "@/components/echarts/water/Ppollution.vue";
import Ovo from "@/components/echarts/water/ovo.vue";
import { getnum, getnum1, getnum2, getnum3, getnum4 } from "@/api/atmosphere";
import { instance2 } from "@/utils/request";
export default {
  components: {
    Top,
    Bottom,
    QQuality,
    Permission,
    Discharge,
    Ppollution,
    Ovo,
  },
  name: "Water",
  data() {
    return {
      series: ["兴隆湖", "鹿溪河", "贾家沟", "保水沟"],
      // 水质
      deer: "",
      mansion: "",
      east: "",
      jiajiagou: "",
      jiajiagou: "",
      flow: "",
      drying: "",
      weather: "",
      twin: "",
      num: "",
      /* 河排污口 */
      brook: "" || 0,
      fuhe: "" || 0,
      dongf: "" || 0,
      xlong: "" || 0,
      // 质量
      lxmb: "",
      lxdq: "",
      fhmb: "",
      fhdq: "",
      dfmb: "",
      dfdq: "",
      xlmb: "",
      xldq: "",
      // 许可
      xkj1: "",
      xkq2: "",
      xkj3: "",
      xkq4: "",
      xkj5: "",
      xkq6: "",
      xkj7: "",
      xkq8: "",
      // 排放
      pfj1: "",
      pfq2: "",
      pfj3: "",
      pfq4: "",
      pfj5: "",
      pfq6: "",
      pfj7: "",
      pfq8: "",

      /* 是 */
      r1: 20,
      r2: 20,
      r3: 20,
      r4: 20,
      r5: 20,
      r6: 20,
      swbj: 0,
      swxc: 0,
      llxc: 0,
      llbj: 0,
      wrbj: 0,
      wrxc: 0,
      baoshuigou: 0,
      sbxc: 0,
      sbbj: 0,
      all: 0,
      waterGauge: 0,
    };
  },
  methods: {
    /* 是 */

    // 占比
    async zb() {
      var that = this;
      instance2
        .get("/device/waterQualityRec/getPortalWaterQuality")
        .then((res) => {
          that.r1 = res.data.data[0].percent;
          that.r2 = res.data.data[1].percent;
          that.r3 = res.data.data[2].percent;
          that.r4 = res.data.data[3].percent;
          that.r5 = res.data.data[4].percent;
          that.r6 = res.data.data[5].percent;
        });
    },
    // 巡查
    async xxx() {
      var that = this;
      instance2.get("/event/alarmInfo/getPortalAlarmInfo").then((res) => {
        that.wrbj = res.data.data.alarmTotal; //报警总数(条)
        that.wrxc = res.data.data.workOrderTotal; //工单总数(条)
        that.swbj = res.data.data.deviceAlarmAutoTotal; //水质污染自动报警数
        that.swxc = res.data.data.waterAlarmConfirmTotal; //水质污染核实报警数
        that.llxc = res.data.data.waterAlarmSimulateTotal; //水质污染模拟预报数
        that.llbj = res.data.data.waterAlarmInspectorReportNum;
        that.sbbj = res.data.data.waterQualityAutoAlarmTotal; //水质设备自检报警数
        that.sbxc = res.data.data.deviceAlarmInspectorReportNum;
      });
    },
    //水质
    async sw() {
      var that = this;
      instance2.get("/device/deviceInfo/getPortalDeviceInfo").then((res) => {
        let {
          xinglonghu,
          waterGauge,
          dryWet,
          weatherStation,
          waterFlowMeter,
          luxihe,
          jiajiagou,
          baoshuigou,
        } = res.data.data;
        that.all = xinglonghu;
        that.jiajiagou = jiajiagou;
        that.baoshuigou = baoshuigou;
        that.drying = dryWet;
        that.flow = waterFlowMeter;
        that.weather = weatherStation;
        that.waterGauge = waterGauge;
        that.deer = luxihe;
      });
    },
    /* 水质 */
    // 鹿溪河
    // async Deer() {
    //   try {
    //     let res = await getnum({
    //       restypeid: 2101,
    //     });
    //     this.deer = res.data;
    //   } catch (err) {
    //     console.log(err);
    //   }
    // },
    // 府河
    async Mansion() {
      try {
        let res = await getnum({
          restypeid: 2102,
        });
        this.mansion = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 东风渠
    async East() {
      try {
        let res = await getnum({
          restypeid: 2103,
        });
        this.east = res.data;
      } catch (err) {
        console.log(err);
      }
    },

    // 二污普
    async Twin() {
      try {
        let res = await getnum({
          restypeid: 2301,
        });
        this.twin = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 工业源
    async Num() {
      try {
        let res = await getnum({
          restypeid: 2302,
        });
        this.num = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    /* 河湖排污口 */
    // 鹿溪河
    async Brook() {
      try {
        let res = await getnum({
          restypeid: 2401,
        });
        this.brook = res.data || 0;
      } catch (err) {
        console.log(err);
      }
    },
    async fuhE() {
      try {
        let res = await getnum({
          restypeid: 2402,
        });
        this.fuhe = res.data || 0;
      } catch (err) {
        console.log(err);
      }
    },
    async dongF() {
      try {
        let res = await getnum({
          restypeid: 2403,
        });
        this.dongf = res.data || 0;
      } catch (err) {
        console.log(err);
      }
    },
    async Xlong() {
      try {
        let res = await getnum({
          restypeid: 2404,
        });
        this.xlong = res.data || 0;
      } catch (err) {
        console.log(err);
      }
    },
    /* 质量 */
    // 兴隆湖
    async Xldq() {
      try {
        let res = await getnum1();
        this.xldq = res.data.data.waqType;
      } catch (err) {
        console.log(err);
      }
    },
    // 泸溪河
    async Lxdq() {
      try {
        let res = await getnum2();
        this.lxdq = res.data.data.waqType;
      } catch (err) {
        console.log(err);
      }
    },
    async Lxmb() {
      try {
        let res = await getnum({
          restypeid: 2501,
        });

        this.lxmb = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Fhmb() {
      try {
        let res = await getnum({
          restypeid: 2503,
        });
        this.fhmb = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Dfmb() {
      try {
        let res = await getnum({
          restypeid: 2505,
        });
        this.dfmb = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Xlmb() {
      try {
        let res = await getnum({
          restypeid: 2507,
        });
        console.log(res);
        this.xlmb = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 贾家沟
    async Dfdq() {
      try {
        let res = await getnum3();
        this.dfdq = res.data.data.waqType;
      } catch (err) {
        console.log(err);
      }
    },
    // 保水沟
    async Fhdq() {
      try {
        let res = await getnum4();
        this.fhdq = res.data.data.waqType;
      } catch (err) {
        console.log(err);
      }
    },

    /* 排放 */
    // 许可量
    async Xkj1() {
      try {
        let res = await getnum({
          restypeid: 2601,
        });
        this.xkj1 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Xkq2() {
      try {
        let res = await getnum({
          restypeid: 2602,
        });
        this.xkq2 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Xkj3() {
      try {
        let res = await getnum({
          restypeid: 2603,
        });
        this.xkj3 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Xkq4() {
      try {
        let res = await getnum({
          restypeid: 2604,
        });
        this.xkq4 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Xkj5() {
      try {
        let res = await getnum({
          restypeid: 2605,
        });
        this.xkj5 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Xkq6() {
      try {
        let res = await getnum({
          restypeid: 2606,
        });
        this.xkq6 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Xkj7() {
      try {
        let res = await getnum({
          restypeid: 2607,
        });
        this.xkj7 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Xkq8() {
      try {
        let res = await getnum({
          restypeid: 2608,
        });
        this.xkq8 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    // 排放
    async Pfj1() {
      try {
        let res = await getnum({
          restypeid: 2701,
        });
        this.pfj1 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Pfq2() {
      try {
        let res = await getnum({
          restypeid: 2702,
        });
        this.pfq2 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Pfj3() {
      try {
        let res = await getnum({
          restypeid: 2703,
        });
        this.pfj3 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Pfq4() {
      try {
        let res = await getnum({
          restypeid: 2704,
        });
        this.pfq4 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Pfj5() {
      try {
        let res = await getnum({
          restypeid: 2705,
        });
        this.pfj5 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Pfq6() {
      try {
        let res = await getnum({
          restypeid: 2706,
        });
        this.pfq6 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Pfj7() {
      try {
        let res = await getnum({
          restypeid: 2707,
        });
        this.pfj7 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
    async Pfq8() {
      try {
        let res = await getnum({
          restypeid: 2708,
        });
        this.pfq8 = res.data;
      } catch (err) {
        console.log(err);
      }
    },
  },
  created() {
    this.zb();
    this.xxx();
    this.sw();
    this.Mansion();
    this.East();
    // this.Flow();
    // this.Drying();
    // this.Weather();
    this.Lxmb();
    this.Fhmb();
    this.Dfmb();
    this.Xlmb();
    this.Twin();
    this.Num();
    this.Brook();
    this.fuhE();
    this.dongF();
    this.Xlong();
    this.Lxdq();
    this.Fhdq();
    this.Dfdq();
    this.Xldq();

    this.Xkj1();
    this.Xkq2();
    this.Xkj3();
    this.Xkq4();
    this.Xkj5();
    this.Xkq6();
    this.Xkj7();
    this.Xkq8();

    this.Pfj1();
    this.Pfq2();
    this.Pfj3();
    this.Pfq4();
    this.Pfj5();
    this.Pfq6();
    this.Pfj7();
    this.Pfq8();
  },
  filters: {
    // 千分位
    Statistic1(num) {
      num = parseFloat(Number(num).toFixed(3));
      let [integer, decimal] = String.prototype.split.call(num, ".");
      integer = integer.replace(/\d(?=(\d{3})+$)/g, "$&,"); // 正则先行断言
      return `${integer}${decimal ? "." + decimal : ""}`;
    },
  },
};
</script>

<style lang="less" scoped>
/* 自定义字体   */
@font-face {
  /* font-properties */
  font-family: elect;
  src: url("../../assets/tfxq/typeface/DINCond-Bold.otf"); /* IE9 */
}
/* 自定义字体   */
@font-face {
  /* font-properties */
  font-family: elect2;
  src: url("../../assets/tfxq/typeface/din-bold_.otf"); /* IE9 */
}
.water {
  height: 100%;
  .main {
    display: flex;

    padding: 0.25rem 0.9625rem 0rem 0.9625rem;
    .public {
      background-color: rgba(0, 0, 0, 0.14);
      border: 0.0125rem solid #263557;
    }
    .water-left {
      flex: 3;
      .series {
        position: relative;

        height: 2.375rem;

        .series-gy {
          position: absolute;
        }
        .red {
          font-size: 0.3125rem;
          left: 0.2rem;
          top: 1rem;
          color: #30bda9;
        }
        .aaa {
          font-size: 0.426667rem /* 32/75 */;
          left: 2.4rem;
          top: 0.5rem;
          color: #b77233;
        }
        .bbb {
          font-size: 0.5rem;
          left: 2.4rem;
          top: 1.3rem;
          color: #bac933;
        }
        .ccc {
          font-size: 0.325rem;
          right: 0.2rem;
          top: 1rem;
          color: #4dafda;
        }
      }
      .source {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
        width: 100%;
        height: 2.375rem;

        .source-main {
          display: flex;
          // padding: 0.375rem;
          .source-left {
            background-image: url(../../assets/tfxq/imgs/shui.png);
            background-size: 100% 100%;
            text-align: center;
            // padding: 0.25rem;
            // height: 1.025rem;
            margin-left: 10px;
            padding-top: 0.2rem;
            margin-right: 0.375rem;
            margin-top: 10%;
            background-color: #162248;
            flex: 1;
          }
          .source-sz {
            font-weight: 700;
            color: #68fc95;
            font-size: 0.3rem;
            font-family: elect;
          }
          .source-zw {
            width: 100%;
            margin-top: 0.0625rem;
            font-size: 0.1625rem;
            color: #a0ede9;
          }
          .source-right {
            background-image: url(../../assets/tfxq/imgs/shui.png);
            background-size: 100% 100%;
            height: 1.025rem;
            text-align: center;
            margin-right: 10px;
            padding-top: 0.2rem;
            margin-top: 10%;
            background-color: #162248;
            flex: 1;
          }
        }
        .source-genre {
          width: 1.1rem;
        }
      }
      .quality {
        width: 100%;
      }
    }
    .water-centre {
      margin-left: 0.25rem;
      margin-right: 0.25rem;
      flex: 5;
      .monitor {
        width: 100%;
        height: 3.75rem;
        margin-bottom: 0.25rem;
        .monitor-xj {
          display: flex;
          .quality-main {
            width: 4rem;
            margin-right: 0.125rem;
            padding: 0.125rem;
            background-color: rgba(32, 86, 158, 0.2);

            .quality-zb {
              letter-spacing: 0.0125rem;
              font-size: 0.175rem;
              text-align: center;
              color: #91c4e8;
            }
          }
        }
        .monitor-water {
          display: flex;
          height: 1.325rem;
          margin-bottom: 10px;
          background: rgba(32, 86, 158, 0.2);
          margin-left: 9px;
          margin-right: 9px;
          .monitor-left {
            color: #a5d8fa;
            width: 1.425rem;
            text-align: center;
            font-size: 0.2rem;
            line-height: 1.25rem;
            background: rgba(32, 86, 158, 0.3);
          }
          .monitor-rigin {
            display: flex;
            width: 100%;
            background: rgba(32, 86, 158, 0.2);

            justify-content: space-evenly;
            .ddiv {
              width: 24%;
              text-align: center;
              margin-top: 0.3rem;
              .sz {
                font-size: 0.25rem;
                font-family: elect2;
                color: #eaf172;
                letter-spacing: 0.0125rem;
              }
              .hl {
                color: #8acffa;
                margin-top: 5px;
                letter-spacing: 0.0125rem;
              }
            }
          }
        }
        .monitor-bottom {
          padding: 0.125rem;
          background: rgba(32, 86, 158, 0.2);
          margin-left: 9px;
          margin-right: 9px;
          .monitor-bbb {
            display: flex;

            height: 100%;
            justify-content: space-between;
          }
          .mb-r {
            margin-right: 0.1875rem;
          }
          .mold {
            width: 2.125rem;

            .mold-top {
              color: #a5d8fa;
              text-align: center;
              height: 0.45rem;
              line-height: 0.45rem;
              background-color: rgba(28, 59, 105, 0.8);
            }
            .mold-bm {
              padding-top: 0.125rem;
              height: 0.875rem;
              text-align: center;
              background: rgba(32, 86, 158, 0.1);
              .mold-sz {
                font-size: 0.25rem;
                font-weight: bold;
                color: #46ecde;
                font-family: elect;
                letter-spacing: 0.0125rem;
              }
              .mold-gs {
                color: #8acffa;
                margin-top: 0.0625rem;
                font-size: 0.175rem;
                letter-spacing: 0.0125rem;
              }
            }
          }
        }
      }
      .discharge {
        width: 100%;
        height: 4.925rem;
        .discharge-bm {
          display: flex;
          padding: 0.125rem;
          .allow,
          .displacement {
            flex: 1;
            .allow-title,
            .displacement-title {
              font-size: 0.225rem;
              color: #a6dcff;
              text-align: center;
            }
          }
        }
        .discharge-genre {
          width: 1.1rem;
        }
      }
    }
    // 右边盒子
    .water-right {
      flex: 3;
      .pollution {
        height: 3.75rem;
        margin-bottom: 0.25rem;

        .pollution-genre {
          width: 1.25rem;
        }
      }
      .patrol {
        width: 100%;

        height: 4.925rem;
        .patrol-bbb {
          // padding: 0px 0.25rem 0.25rem;
          width: 100%;
        }
        .patrol-bm {
          // border-bottom: 0.0125rem solid #175663;
          display: flex;
          width: 100%;
          justify-content: space-around;
          align-items: center;
          border-radius: 0px 0px 5px 5px;
          position: relative;
          height: 1.0625rem;
          background: -webkit-linear-gradient(
            to bottom,
            #1c2742,
            #172238,
            #172541,
            #152848
          );
          background: linear-gradient(
            to bottom,
            #1c2742,
            #172238,
            #172541,
            #152848
          );

          .before {
            position: absolute;
            bottom: 0px;
            height: 1px;
            width: 80%;
            background: -webkit-linear-gradient(
              left,
              #173748,
              #18686e,
              #173748
            );
          }
          .patrol-sz {
            width: 100%;
            text-align: center;
            font-weight: 700;
            font-size: 0.35rem;
            color: #f5a540;
            display: block;
            font-family: elect2;
          }
          .patrol-z {
            width: 100%;
            text-align: center;
            font-size: 0.175rem;
            color: #6fe0da;
            display: block;
          }
        }
        .patrol-genre {
          width: 1.5rem;
        }
      }
    }
  }

  .box {
    display: flex;
    align-items: center;
    padding: 0.125rem;

    .genre {
      position: relative;
      width: 0.725rem;
      height: 0.325rem;
      font-size: 0.175rem;
      color: #44deff;
      letter-spacing: 0.0125rem;
      background-color: #1c3f81;
      line-height: 0.325rem;
      text-align: center;
      &::before {
        position: absolute;
        top: -1px;
        left: -1px;
        width: 0.0625rem;
        height: 0.0625rem;
        border-left: 0.025rem solid #2d66cb;
        border-top: 0.025rem solid #2d66cb;
        content: "";
      }
      &::after {
        position: absolute;
        top: -1px;
        right: -1px;
        width: 0.0625rem;
        height: 0.0625rem;
        border-right: 0.025rem solid #2d66cb;
        border-top: 0.025rem solid #2d66cb;
        content: "";
      }
      .footer {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        &::before {
          position: absolute;
          bottom: -1px;
          left: -1px;
          width: 0.0625rem;
          height: 0.0625rem;
          border-left: 0.025rem solid #2d66cb;
          border-bottom: 0.025rem solid #2d66cb;
          content: "";
        }
        &::after {
          position: absolute;
          bottom: -1px;
          right: -1px;
          width: 0.0625rem;
          height: 0.0625rem;
          border-right: 0.025rem solid #2d66cb;
          border-bottom: 0.025rem solid #2d66cb;
          content: "";
        }
      }
    }
    .wire {
      flex: 1;
      height: 0.025rem;

      background: -webkit-linear-gradient(left, rgba(27, 47, 81, 0), #2173c0);
    }
    .tail {
      width: 0.15rem;
      height: 0.0625rem;
      background-color: #2174c2;
    }
  }
}
</style>
